<template>
  <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(tab_v, tab_k) in tab_pane" :key="tab_v" :label="tab_k" :name="tab_v.toString()">
          <el-row>
                      <el-col :span="17">

        <el-form v-for="(item_value,item_key,index) in form_data._source[field_mapping[tab_v]]" :key="index" size="small" :inline="false" label-width="100px" label-position="top">
          <el-col :span="5" style="margin-right:20px">
            <el-form-item   :label="mappingreverse[item_key]">
             <div v-if="item_key === 'room'">
                    <el-select v-model="post_data._source[field_mapping[tab_v]][item_key]" placeholder="请选择">
    <el-option
      v-for="item in room"
      :key="item.id"
      :label="item.name"
      :value="item.name">
    </el-option>
  </el-select>
              </div>
                            <div v-else-if="item_key === 'cabinet'" >  
                    <el-select v-model="post_data._source[field_mapping[tab_v]][item_key]" placeholder="请选择" > 
    <el-option
      v-for="item in cabinet"
      :key="item.id"
      :label="item.name"
      :value="item.name">
    </el-option>
  </el-select>
              </div>
                                          <div v-else-if="item_key === 'supplier'">
                    <el-select v-model="post_data._source[field_mapping[tab_v]][item_key]" placeholder="请选择">
    <el-option
      v-for="item in supplier"
      :key="item.id"
      :label="item.name"
      :value="item.name">
    </el-option>
  </el-select>
              </div>
                                          <div v-else-if="item_key === 'audit'">
                    <el-select v-model="post_data._source[field_mapping[tab_v]][item_key]" placeholder="请选择">
    <el-option
      v-for="item in auditstatus"
      :key="item.id"
      :label="item.status"
      :value="item.status">
    </el-option>
  </el-select>
              </div>
                                                        <div v-else-if="item_key === 'online'">
                    <el-select v-model="post_data._source[field_mapping[tab_v]][item_key]" placeholder="请选择">
    <el-option
      v-for="item in online"
      :key="item.id"
      :label="item.status"
      :value="item.status">
    </el-option>
  </el-select>
              </div>
              <div v-else-if="typeof item_value === 'object'">
                                              <el-button @click="handleMulti(item_value,item_key,tab_v)" plain   style="width: 100%" >编辑子属性</el-button>
              </div>
                  <div v-else>

              <el-input v-model="post_data._source[field_mapping[tab_v]][item_key]" placeholder="请输入内容" :disabled="is_lock"></el-input>
                  </div>

            </el-form-item>
          </el-col>
        </el-form>
                      </el-col>
           <el-col :span="1">
                                           <el-divider direction="vertical"></el-divider>

   </el-col>
             <el-col :span="6">
               
      <el-form ref="form" label-width="100px">
                       
                      <el-form-item label="资产类型：">
                        {{form_data._source["S-table"]}}
                    </el-form-item>
                                          <el-form-item label="创建日期：">
                        {{form_data._source["S-creation-time"]}}
                    </el-form-item>
                                                              <el-form-item label="创建来源：">
                        {{form_data._source["S-creator"]}}
                    </el-form-item>
                                                                                  <el-form-item label="最近修改：">
                        {{form_data._source["S-last-modified"]}}
                    </el-form-item>
                                                                                  <el-form-item label="资产编号：">
                        HN-CS-YH-1-NE-RSW-RUT-14
                    </el-form-item>
                            <el-form-item label="资产类型：" >
                                     <img :src="qcode" width="100" height="100">
                    </el-form-item>

        </el-form>
            
             </el-col>
             </el-row>
        </el-tab-pane>
        
      </el-tabs>
            <center>
      <el-form label-width="0px" style="margin-right: 30px align:center">
      <el-form-item>
        <el-button size="small" style="width: 10%" type="primary" @click="on_submit()">提交</el-button>
        <el-button size="small" style="width: 10%" type="info"  @click="on_close()" >取消</el-button>
      </el-form-item>
    </el-form>
    </center>
        <el-dialog   :visible.sync="is_visible" @close='closeDialog'>


<el-table
        :data="form_tableData"
        border
        >
        <!-- 自定义列的遍历-->
        <el-table-column v-for="(value,col, index) in form_tableData[0]" :key="index" :label="col" >
          <!-- 数据的遍历  scope.row就代表数据的每一个对象-->
          <template slot-scope="scope">
                        <el-input v-model="scope.row[col]" placeholder="请输入内容" clearable></el-input>

          </template>
        </el-table-column>
        <el-table-column label="操作" width="300px" >
          <!-- 数据的遍历  scope.row就代表数据的每一个对象-->
          <template slot-scope="scope">
                        <el-button raw-type="button" @click="addCol()">
  添加列
</el-button>
                <el-button raw-type="button" @click="addLine()">
                  添加行
                </el-button>
                                <el-button raw-type="button" @click="delLine(scope)">
                  删除行
                </el-button>
          </template>
        </el-table-column>
    </el-table>

</el-dialog>
<el-dialog :visible.sync="col_visible">
<el-form>
    <el-form-item label="列名称">
    <el-input v-model="ColInfo.name" placeholder="列名称"></el-input>
                                    <el-button raw-type="button" @click="confirm()">
                  确定
                </el-button>
  </el-form-item>
</el-form>
</el-dialog>
  </div>
</template>

<script>
import { addField, delField, listField } from "@/api/vadmin/cmdb/table";
import { listData,updateData } from "@/api/vadmin/cmdb/data"
import { listCabin,listRoom } from "@/api/vadmin/cmdb/roomcabin";
import { listName } from "@/api/vadmin/cmdb/supplier";
import { listStatus } from "@/api/vadmin/cmdb/status";
import { listMappingreverse } from "@/api/vadmin/cmdb/mapping";
import { listQcode } from "@/api/vadmin/cmdb/qcode";

export default {
  name: "UpdateDATA",
  components: {},
  data() {
    return {
      is_visible: false,
      col_visible:false,
      qcode:"",
      ColInfo:{"name":""},
      loading: false,
      form_data: {"_source":{"jb":{},"sy":{},"ht":{},"wd":{},"wx":{},"gl":{},"bg":{}}},
      field_data: {fields:[]},
      post_data:{},
      field_mapping:{},
      form_tableData:[],
      mappingreverse:{},
      data: {},
      room:[],
      online:[],
      cabinet:[],
      auditstatus:[],
      supplier:[],
      errors: {},
            curr_item:{},
      curr_tab:"jb",
      activeName: 0,
      is_lock:false,
      table: "",
      tab_pane: {
        基本属性: 0,
        私有属性: 1,
      },
    };
  },
    mounted(){

          this.GetBaseInfo()
    this.form_data=JSON.parse(localStorage.getItem('items'))
    console.log(this.form_data)
    this.table_id=this.form_data["_source"]["name"]
    this.post_data=JSON.parse(localStorage.getItem('items'))
          listMappingreverse({table_id:this.form_data._index}).then(response=>{
      this.mappingreverse=response
      })
        listQcode({id:this.form_data._id,index:this.form_data._index}).then(response=>{
    let url = window.URL.createObjectURL(response)
this.qcode = url
    })
    },
  created() {
    this.field_mapping=this.$store.state.cmdb.Field_Mapping
  },
  methods: {
        GetBaseInfo(){
      listCabin().then(response=>{
        this.cabinet=response.results
      })
      listRoom().then(response=>{
        this.room=response.results
      })
      listName().then(response=>{
        this.supplier=response.results
      })
      listStatus({pid:2}).then(response=>{
        this.online=response.results
      })
            listStatus({pid:1}).then(response=>{
        this.auditstatus=response.results
      })
    },
    handleClose() {
      this.is_visible = false;
      this.data = false;
      this.$emit("listenChileEvent", 1);
    },
    handleClick() {
      this.field_data= {fields:[]}
      console.log(this.activeName,"表",this.table)
      listField({attr:this.activeName,table_id:this.table}).then((response)=>{
        console.log(response.results)
        this.field_data={fields:response.results}
      })
    },
    
    on_show(data, table) {
      this.table = table._index;
      console.log(this.table)
      listMappingreverse({table_id:table._index}).then(response=>{
      this.mappingreverse=response
      this.is_visible = data;
      })

    },
    on_submit(){
      this.post_data["name"]=this.table;
      updateData(this.post_data).then(response=>{
          this.is_visible=false;
          this.$emit("listenChileEvent") 
          this.msgSuccess("修改成功");
          this.$router.go(-1)
      })
    },
    handleMulti(item,item_key,tab_v){
      console.log(item_key)
      this.form_tableData=item
      this.curr_item=item_key
      this.curr_tab=this.field_mapping[tab_v]
            this.is_visible=true

    },
    on_close(){
      this.is_visible=false;
    },
  addLine(){
    this.form_tableData.push(JSON.parse(JSON.stringify(this.form_tableData[0])))
  },
  delLine(data){
    this.form_tableData.splice(data.$index, 1);
  },
  
    addCol(){
      this.col_visible=true;

  },
    closeDialog(){
    console.log("窗口关闭事件")
    //添加到post数据中
  // Vue.set( this.post_data[this.curr_tab],this.curr_item.name,[{"aaa":""}])
  console.log(this.curr_tab,this.curr_item)
  console.log( this.post_data["_source"][this.curr_tab][this.curr_item])
    this.post_data["_source"][this.curr_tab][this.curr_item]=JSON.parse(JSON.stringify(this.form_tableData))
    //清理数据
    console.log(this.post_data)
    this.form_tableData=[{name: '',}]
    this.ColInfo={"name":""}
  },
  confirm(){
      this.col_visible=false
      this.tableData=this.form_tableData
        this.form_tableData.forEach((item,index)=>{
          var name =this.ColInfo.name
  Vue.set(item,name,'')
        });
            this.cols.push({prop: this.ColInfo.name})
  },
  },
};
</script>

<style scoped>
 .el-divider--vertical{
    height:300px;
}

</style>
<style >
.btn-no-line> .el-form-item__content{
  line-height: 11px !important;
}
</style>